import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import { PullToRefresh, Cell, Toast } from '@nutui/nutui-react-taro'
import Header from '@/sites/components/header'
import { useTranslate } from '@/sites/assets/locale/taro'

const PullToRefreshDemo = () => {
    const [translated] = useTranslate({
        'zh-CN': {
            basic: '基础用法',
        },
        'zh-TW': {
            basic: '基礎用法',
        },
        'en-US': {
            basic: 'Basic Usage',
        },
    })
    const [list] = useState([1, 2, 3, 4, 5, 6, 7])
    const [show, SetShow] = useState(false)
    const [toastMsg, SetToastMsg] = useState('')
    const toastShow = (msg: any) => {
        SetToastMsg(msg)
        SetShow(true)
    }
    return (
        <>
            <Header />
            <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
                <h2>{translated.basic}</h2>
                <PullToRefresh
                    onRefresh={() =>
                        new Promise((resolve) => {
                            //   Toast.text('😊')
                            toastShow('😊')
                            resolve('done')
                        })
                    }
                >
                    {list.map((item) => (
                        <Cell key={item}>{item}</Cell>
                    ))}
                </PullToRefresh>
                <Toast
                    type="text"
                    visible={show}
                    msg={toastMsg}
                    onClose={() => {
                        SetShow(false)
                    }}
                />
            </div>
        </>
    )
}

export default PullToRefreshDemo
